<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="pragma" content="no-cache" />
	<script src="./jquery.min.js"></script>
	<script src="./clipboard.min.js"></script>
	<style type="text/css">
		body {
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
			color: #666666;
			background: #fff;
			text-align: left;
		}

		a {
			color: #1E7ACE;
			text-decoration: none;
		}

		a:hover {
			color: #000;
			text-decoration: underline;
		}

		h3 {
			font-size: 12px;
			font-weight: bold;
		}

		pre,
		p {
			color: #1E7ACE;
			margin: 4px;
		}

		input,
		select,
		textarea {
			padding: 1px;
			margin: 2px;
			font-size: 11px;
		}

		fieldset {
			padding: 10px;
			margin-top: 10px;
			border: 1px solid #A4CDF2;
			background: #fff;
		}

		fieldset legend {
			color: #1E7ACE;
			font-weight: bold;
			padding: 3px 20px 3px 20px;
			border: 1px solid #A4CDF2;
			background: #fff;
		}

		input {
			border: 1px solid #A4CDF2;
		}

		button {
			border: 1px solid #A4CDF2;
			background-color: #FFFFFF;
			height: 25px;
			margin-top: 10px;
			font-weight: bold;
			color: #1E7ACE;
		}

		-->
	</style>

	<script>
		$.getScript('./describe.js?rd=' + Math.random()).then(function () {
			var describe = new Describe();
			describe.load();
		}).catch(function () {
			alert('get describe error.');
		});

		$(document).ready(function () {
			var clipboard = new Clipboard("#btn_copy");
			jQuery("#Sample").hide("fast");
			$("#btn_toggleSample").click(function () {
				$("#Sample").toggle();
			});
		});	
	</script>
</head>

<body
	style="font-size: 12px; font-family: Microsoft Yahei; margin: 0px;border-image: linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 100%, #ffffff);box-shadow: inset 15px 0 5px -16px #e7e7e7;background-image: -webkit-radial-gradient(right, #f2f2f2, #ffffff 100%);">
	<table style="width: 1800px; margin: 0 auto">
		<tr>
			<td style="width: 350px;" valign="top">
				<fieldset>
					<legend>API Menu</legend>
					<div id="menu" style="height: 850px; overflow: auto;">&nbsp;</div>
				</fieldset>
			</td>
			<td valign="top">
				<!--<fieldset>
					<legend>Content</legend>
					<div id="content"
						style="white-space: pre; font-size: 12px; word-break: break-all; word-wrap: break-word">&nbsp;</div>
				</fieldset> -->

				<div id="content"
					style="white-space: pre; font-size: 12px; word-break: break-all; word-wrap: break-word;border-image: linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 100%, #ffffff);box-shadow: inset 15px 0 5px -16px #e7e7e7;background-image: -webkit-radial-gradient(right, #f2f2f2, #ffffff 100%);">
					&nbsp;</div>

				<fieldset>
					<legend>
						Sample&nbsp;<a id="btn_copy" href="javascript:" data-clipboard-target="#Sample">copy</a> &nbsp;<a
							id="btn_toggleSample" href="javascript:void(0)">show or hide</a>
					</legend>
					<div style="padding-left:12px">
						<div id="Sample"
							style="white-space: pre; font-size: 12px; word-break: break-all; word-wrap: break-word; width: 1400px; display:none">
							&nbsp;</div>
					</div>
				</fieldset>

				<fieldset>
					<legend>
						Result&nbsp;<a id="btn_copy" href="javascript:" data-clipboard-target="#result">copy</a>&nbsp;
					</legend>
					<div id="result"
						style="white-space: pre; font-size: 12px; word-break: break-all; word-wrap: break-word; width: 1400px">
						&nbsp;</div>
				</fieldset>
			</td>
		</tr>
	</table>
</body>

</html>